/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component, Suspense } from "react";
import { Layout, Menu, Icon, Spin, Row, Col, Dropdown, Breadcrumb } from "antd";
import "./index.less";
import { actions } from "../../reducers/main";
import { connect } from "react-redux";
import axios from "../../apis/api";
import { withRouter, matchPath, Switch, Route } from "react-router-dom";
import ResetPwDlg from "../components/ResetPwDlg";
import Avatar from "../components/avatar";
import MyMenu from "../components/Menu";
import ViewConfig, { TitleMap } from "./view.config";

const { Header, Sider, Content } = Layout;

const mapStateToProps = (state, ownProps) => {
  return {
    vwAgentCashStat: state.main.vwAgentCashStat,
    vwAgentCashDayStat: state.main.vwAgentCashDayStat,
    menus: state.main.menus,
    user: state.main.user,
    isChannel: state.main.isChannel
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchInitData: next => dispatch(actions.fetchInitData(next)),
    fetchChannelSelectList: () => dispatch(actions.fetchChannelSelectList())
  };
};

class Main extends Component {
  state = {
    collapsed: true,
    loading: false,
    showResetPwDlg: false,
    routes: []
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  componentDidMount() {
    this.getInitData();
  }

  getInitData = async () => {
    this.setState({ loading: true });
    this.props.fetchInitData(() => {
      this.setState({ loading: false });
      const { isChannel } = this.props;
      if (isChannel) {
        this.props.fetchChannelSelectList();
      }
    });
  };

  loginOut = async () => {
    await axios.get("/userLogout").then(() => {
      this.props.history.push("/login");
    });
  };

  goToPerson = () => {
    this.props.history.push("/main/person");
  };

  resetPw = () => {
    this.setState({ showResetPwDlg: true });
  };

  cancelResetPw = () => {
    this.setState({ showResetPwDlg: false });
  };

  resetPwSuccess = () => {
    this.setState({ showResetPwDlg: false });
  };

  fullScreen = () => {};

  handleBack = () => {
    this.props.history.goBack();
  };

  componentWillReceiveProps(nextProps, nextContext) {
    const { history } = nextProps;
    const { location } = history;
    const { pathname } = location;
    const { params } = this.props.match;
    const routes = [];
    Object.keys(TitleMap).forEach(path => {
      if (matchPath(pathname, { path })) {
        let truePath = path;
        Object.keys(params).forEach(key => {
          truePath = truePath.replace(`:${key}`, params[key]);
        });
        routes.push({
          path: `${truePath}`,
          breadcrumbName: TitleMap[path]
        });
      }
    });
    this.setState({
      routes
    });
  }
  go = path => {
    this.props.history.push(path);
  };

  render() {
    const { loading, collapsed, showResetPwDlg, routes } = this.state;
    const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" onClick={this.goToPerson}>
            <Icon type="user" />
            &nbsp;&nbsp;个人中心
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" onClick={this.resetPw}>
            <Icon type="key" />
            &nbsp;&nbsp;修改密码
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" onClick={this.loginOut}>
            <Icon type="logout" />
            &nbsp;&nbsp;退出登录
          </a>
        </Menu.Item>
      </Menu>
    );
    return (
      <Spin spinning={loading} style={{ height: "100%" }}>
        <Layout className={"main-view"}>
          <Sider
            trigger={null}
            collapsible
            collapsed={collapsed}
            theme="dark"
            style={{ background: "#17245C" }}
          >
            {/*{!collapsed ? <div style={{height: 64, textAlign: 'center', color: '#fff',lineHeight: '64px', fontSize: 20,backgroundColor: '#367fa9'}}>*/}
            {/*管理系统*/}
            {/*</div> : null}*/}
            {/*{!collapsed ? <div style={{height: 64, lineHeight: '64px', color: 'white', padding: 5, fontSize: 11}}>*/}
            {/*<Row>*/}
            {/*<Col span={6}>*/}
            {/*<Avatar size={42} icon="user" />*/}
            {/*</Col>*/}
            {/*<Col span={18}>*/}
            {/*<div style={{height: 32, lineHeight: '32px'}}>*/}
            {/*{this.props.user.userName}*/}
            {/*</div>*/}
            {/*<div style={{height: 32, lineHeight: '32px'}}>*/}
            {/*<span className={'fa-circle'}>&nbsp;&nbsp;</span><span style={{marginLeft: 15}}>在线&nbsp;&nbsp;&nbsp;&nbsp;</span>*/}
            {/*<span style={{cursor: 'pointer'}} onClick={this.loginOut}><Icon style={{color: '#ED5566'}} type="logout" />&nbsp;&nbsp;注销</span>*/}
            {/*</div>*/}
            {/*</Col>*/}
            {/*</Row>*/}
            {/*</div>: <div style={{height: 64, lineHeight: '64px', color: 'white', textAlign: 'center'}}>*/}
            {/*<Avatar size={42} icon="user" />*/}
            {/*</div>}*/}

            <MyMenu />
          </Sider>
          <Layout>
            <Header style={{ background: "#01343F", padding: 0 }}>
              <Icon
                className="trigger"
                style={{ color: "#fff", fontSize: 20, marginLeft: 20 }}
                type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                onClick={this.toggle}
              />
              <div className={"head-item"}>
                <Avatar size={32} icon="user" />
                &nbsp;&nbsp;
                <Dropdown overlay={menu}>
                  <span>
                    {this.props.user.userName}
                    <Icon type="down" />
                  </span>
                </Dropdown>
              </div>
              {/*<div className={'head-item'} onClick={this.fullScreen}>*/}
              {/*<Icon type="fullscreen" />全屏显示*/}
              {/*</div>*/}
            </Header>
            <Content
              style={{
                margin: "24px 16px",
                padding: 24,
                background: "#fff",
                minHeight: 280,
                overflowY: "auto"
              }}
            >
              <Breadcrumb style={{ marginBottom: 20 }}>
                {routes.map((item, index) => {
                  if (index === routes.length - 1) {
                    return (
                      <Breadcrumb.Item>{item.breadcrumbName}</Breadcrumb.Item>
                    );
                  } else {
                    return (
                      <Breadcrumb.Item>
                        <a onClick={() => this.go(item.path)}>
                          {item.breadcrumbName}
                        </a>
                      </Breadcrumb.Item>
                    );
                  }
                })}
              </Breadcrumb>
              <Suspense fallback={<div>Loading...</div>}>
                <Switch>{ViewConfig.map((item, index) => item)}</Switch>
              </Suspense>
            </Content>
          </Layout>
        </Layout>
        <ResetPwDlg
          cancelCb={this.cancelResetPw}
          okCb={this.resetPwSuccess}
          visible={showResetPwDlg}
        />
      </Spin>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Main));
